//鼠标在白色区域移动时，能控制才是容器的高度

//在白色容器内监听鼠标移动事件

//1.获取元素
var speed = document.querySelector(".speed");
var bar = document.querySelector(".speed-bar");
var video = document.querySelector(".flex");
speed.addEventListener("mousemove",function(e)  {;
    //2.获取鼠标在容器内的位置
    var y = e.pageY - speed.offsetTop;
    var percent = y / speed.offsetHeight;
    var height = Math.round(percent * 100)+"%";
    bar.style.height = height;
    console.log(percent);
    //3.计算容器的高度
    var min = 0.4;
    var max = 4;
    var playbackRate = percent * (max - min) + min;
    bar.textContent = playbackRate.toFixed(2) + "x";

    //控制视频播放速度

    video.playbackRate = playbackRate;
})